<!DOCTYPE html>
<html>
  <head>
    <title>Tailwind Website Clones</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style type="text/tailwindcss">
      @layer components {
        .link-title {
          /* ... */
          @apply flex-grow px-6 py-4 m-2 text-xl text-center text-gray-900 bg-white rounded-md shadow-lg;
        }
      }
    </style> 
   </head>
  <body class="flex flex-col items-center min-h-screen py-1 bg-gray-200">

    <h1 class="my-2 text-3xl font-extrabold leading-9 tracking-tight text-center sm:text-2xl sm:leading-10 text-sky-500">
     Tailwind CSS <span class="text-gray-700 ">业务组件</span>
    </h1>

    <div class="flex flex-wrap w-full my-[1rem] sm:w-1/3">
      <a href="./src/components/Alert" class="link-title">Alert</a>
      <a href="./src/components/Button" class="link-title">Button</a>
      <a href="./src/components/BlogSelection" class="link-title">BlogSelection</a>
      <a href="./src/components/CallToActionSection" class="link-title">CallToActionSection</a>
      <a href="./src/components/Alert" class="link-title">Card</a>
    </div>
    <h2 class="my-2 text-2xl font-extrabold leading-9 tracking-tight text-center text-gray-900 sm:leading-10">
      Check back for more later...
    </h2>
  </body>
</html>